<template>
  <div class="bottom">
    <div class="bottom-box">
      <div class="box-top">
        <div class="box-information">
          <div class="inforBox" v-for="(message, index) in infortmation" 
          :class="heightList[index]"
          :key="'massage' + index">
            <div class="fontOne">{{ message.title }}</div>
            <div class="lineShort"></div>
            <div v-for="(message2, index) in message.infor" :key="'message2' + index">
              <div class="fontTwo">{{ message2 }}</div>
            </div>
          </div>
        </div>
        <!-- 二维码 -->
        <div class="qRBox">
          <div class="qRBox-fontOne">关注我们</div>
          <div class="qRBox-box"><img class="qRBox-image" src="../assets/Qrcode.png" alt="" /></div>
          <div class="qRBox-fontTwo">关注我们</div>
        </div>
      </div>

      <div class="box-line"></div>

      <div class="box-between">
        <div class="betweenTitle">友情链接</div>
        <div class="lineFriend">
          <div class="lineFriend-line"></div>
        </div>

        <div class="lableBox">
          <div class="lableOne">职业技能等级证书信息管理服务平台</div>
          <div class="lableOne">职业技能等级证书信息管理服务平台</div>
          <div class="lableOne">职业技能等级证书信息管理服务平台</div>
          <div class="lableOne">职业技能等级证书信息管理服务平台</div>
          <div class="lableOne">职业技能等级证书信息管理服务平台</div>
          <div class="lableOne">职业技能等级证书信息管理服务平台</div>
          <div class="lableOne">职业技能等级证书信息管理服务平台</div>

          <div class="lableOne">职业技能等级证书信息管理服务平台</div>
        </div>
      </div>
      <div class="box-bottom">
        <div class="lastFont">
          <div class="box-bottomOne">Copyright http://www.1daoyun.com/,All Rights Reserved.</div>
          <div class="box-bottomTwo">苏I比CP备1704195号</div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      message: 'hello world',
      infortmation: [
        {
          title: '公司信息',
          infor: ['江苏一道云科技发展有限公司', '地址:江苏省无锡市太湖西大道2188号200室', '邮箱:Service@1daoyun.com'],
        },
        {
          title: '资料下载',
          infor: ['教学资料', '行业资料'],
        },
        {
          title: '联系方式',
          infor: ['服务热线：400-850-6550', '服务热线：400-850-6550'],
        },
      ],
      heightList:[
        'height1',
        'height2'
      ],
    };
  },
  created() {},
  methods: {},
};
</script>

<style  scoped>
.bottom {
  width: 100%;
  height: 464px;
  background-color: #24262c;
}
.bottom-box {
  width: 1200px;
  height: 464px;
  margin: 0 auto;
}
.box-top {
  width: 1200px;
  height: 227px;
  display: flex;  
}
.box-line {
  border-bottom: 2px solid #3a3c42;
}
.box-between {
  width: 1200px;
  height: 178px;
}

/* 3个一起的盒子 */
.box-information {
  width: 1070px;
  height: 227px;
  margin: 0 auto;
  display: flex;
}
/* 一个 */
.inforBox {
  /* width: 443px; */
  width: 286px;
  height: 227;
  margin: 30px 0 30px 0;
}

.inforBox.height1{
  /* width: 443px; */
  width: 470px;

}

.fontOne {
  width: 285px;
  height: 17px;
  font-size: 17px;
  color: #ffffff;
  line-height: 17px;
  margin-bottom: 15px;
}
.lineShort {
  width: 33px;
  height: 2px;
  background-color: #fff;
  margin-bottom: 15px;
}
.fontTwo {
  width: 285px;
  height: 14px;
  font-size: 14px;
  color: #ffffff;
  line-height: 14px;
  margin-bottom: 15px;
}
/* 二维码 */
.qRBox {
  /* width: 185px; */
  width: 130px;
  height: 227px;
  padding: 30px 0 30px 0px;
}
.qRBox-fontOne {
  width: 90px;
  height: 14px;
  font-size: 14px;
  color: #ffffff;
  line-height: 14px;
  margin-bottom: 15px;
  text-align: center;
}
.qRBox-box {
  width: 90px;
  height: 90px;
}
.qRBox-image {
  width: 90px;
  height: 90px;
}
.qRBox-fontTwo {
  width: 90px;
  height: 14px;
  font-size: 14px;
  color: #ffffff;
  line-height: 14px;
  margin-top: 15px;
  text-align: center;
}
/* 第二大部分 */
.betweenTitle {
  width: 100%;
  height: 30px;
  text-align: center;
  font-size: 17px;
  line-height: 18px;
  box-sizing: border-box;
  color: #fff;
  padding-top: 10px;
}
.lineFriend {
  height: 34px;
  width: 100%;
}
.lineFriend-line {
  width: 30px;
  height: 2px;
  background-color: #fff;
  margin: 15px auto;
}
.lableBox {
  width: 1200px;
  height: 80px;
  display: flex;
  flex-wrap: wrap;
}
.lableOne {
  width: 300px;
  height: 14px;
  line-height: 14px;
  color: #fff;
}
/* 这是第三部分 */
.box-bottom {
  width: 1200px;
  height: 60px;

}
.lastFont {
  display: flex;
  height: 60px;
  width: 600px;
    margin: 0 auto;
    color: #fff;
}
.box-bottomOne {
  text-align: center;
  line-height: 60px;
  margin-right: 40px;
  
}
.box-bottomTwo {
  text-align: center;
  line-height: 60px;
}
</style>

